<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!--edge浏览器H5兼容设置-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--360浏览器H5兼容设置-->
	<meta name="renderer" content="webkit" />
	<title>电脑商城</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--导入核心文件-->
	<script src="../bootstrap3/js/holder.js"></script>
	<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
	<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
	<script src="../bootstrap3/js/bootstrap.js"></script>
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="../css/top.css" />
	<link rel="stylesheet" type="text/css" href="../css/index.css" />
	<link rel="stylesheet" type="text/css" href="../css/layout.css" />
	<link rel="stylesheet" type="text/css" href="../css/reg.css" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css" />
</head>
<body>
<!--头部-->
<!--主体-->
<div class="container mycontent text-left">
	<!--透明层 -->
	<div class="regDiv">
		<p>新用户注册</p>
		<!--表单开始-->
		<form id="form-reg" class="form-horizontal" role="form">
			<!--用户名-->
			<div class="form-group">
				<label class="col-md-3 control-label">名字：</label>
				<div class="col-md-8">
					<input name="username" type="text" class="form-control" placeholder="请输入用户名">
				</div>
			</div>
			<!--密码-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 密码：</label>
				<div class="col-md-8">
					<input id="password" name="password" type="text" class="form-control" placeholder="请输入密码">
				</div>
			</div>
			<!--确认密码-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 确认密码：</label>
				<div class="col-md-8">
					<input id="password1" name="password1" type="text" class="form-control" placeholder="请再次输入密码">
				</div>
			</div>
			<!--手机号-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 手机号：</label>
				<div class="col-md-8">
					<input id="phone" name="phone" type="text" class="form-control" placeholder="请输入11位手机号">
				</div>
			</div>
			<!--邮箱-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 邮箱：</label>
				<div class="col-md-8">
					<input id="email" name="email" type="text" class="form-control" placeholder="请输入邮箱">
				</div>
			</div>
			<!--性别-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 性别：</label>
				<div class="col-md-8">
					<input id="gender" name="gender" type="text" class="form-control" placeholder="请输入性别 男1 女0">
				</div>
			</div>
			<!--城市-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 城市：</label>
				<div class="col-md-8">
					<input id="city" name="city" type="text" class="form-control" placeholder="请输入城市">
				</div>
			</div>
			<!--银行账号-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 银行账号：</label>
				<div class="col-md-8">
					<input id="bankAccount" name="bankAccount" type="text" class="form-control" placeholder="请输入银行账号">
				</div>
			</div>
			<!--用户类型-->
			<div class="form-group">
				<label class="col-md-3 control-label"> 用户类型：</label>
				<div class="col-md-8">
					<input id="admin" name="userType" type="text" class="form-control" placeholder="0代表用户 1代表管理员  2代表商家">
				</div>
			</div>

			<!-- 管理员填写 -->
			<div id="order" class="form-group hide">
				<label class="col-md-3 control-label"> 指令：</label>
				<div class="col-md-8">
					<input id="num" name="admin_num" type="text" class="form-control" placeholder="请输入指令">
				</div>
			</div>

			<!--提交按钮-->
			<div class="form-group">
				<label class="col-md-3 control-label"></label>
				<div class="col-md-8">
					<input id="btn-reg" class="btn btn-primary" type="button" value="立即注册" />
					<span class="pull-right"><small>已经有账号？</small><a href="login.html">登录</a></span>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	var input = document.querySelector('#admin');
	var pass1=document.querySelector('#password');
	var pass2=document.querySelector('#password1');
	var order = document.querySelector('#order');
	var input_j = document.querySelector('#num');
	var phone = document.querySelector('#phone');
	var email = document.querySelector('#email');
	var gender = document.querySelector('#gender');
	var city = document.querySelector('#city');
	var bankAccount = document.querySelector('#bankAccount');
	var bankAccountLen = "";
	var cityType = "";

	function test() {
		var temp = email.value;
		if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(temp)) {
			console.log("邮箱错误");
			alert('请输入有效的E_mail');
			myreg.focus();
			return false;
		}
	}

	function pass_equal(){
		var pass_1=pass1.value;
		var pass_2=pass2.value;
		if(pass_1!=pass_2){
			console.log("密码不一致");
			alert('请输入同样的密码');
			pass1.value=null;
			pass2.value=null;
			pass_1.value=null;
			pass_2.value=null;
		}
	}

	function phone_lens(){
		var pL=phone.value;
		if(pL.length!=11){
			console.log("手机号非法");
			alert('请输入正确的手机号');
			phone.value=null;
		}
	}

	pass2.addEventListener('blur',function () {
		pass_equal();
	})
	email.addEventListener('blur', function() {
		test();
	})
	city.addEventListener('blur', function() {
		cityType = this.value;
		for (var i = 0; i < cityType.length; i++) {
			if (!isNaN(cityType.charAt(i))) {
				console.log("城市错误");
				alert('请输入正确的城市');
				this.value = null;
			}
		}
	});
	gender.addEventListener('blur', function() {
		if(this.value == 1){
		}else if(this.value == 0){
		}else{
			console.log("性别错误");
			alert('请输入正确数字（1表示男，0表示女）');
			this.value = null;
		}
	});
	//bankAccount.addEventListener('blur', function() {
	//	bankAccountLen = this.value;
	//	if (bankAccountLen.length != 19) {
	//		console.log("银行卡号错误,长度为19");
	//		alert('请输入正确的银行卡号');
	//		this.value = null;
	//	}
	//});
	phone.addEventListener('blur', function() {
		phone_lens();
		// 	phonelen=this.value;
		// if (phonelen.length > 11 && phonelen.length < 11) {
		// 	console.log("手机号错误");
		// 	alert('请输入正确手机号');
		// 	this.value = null;
		// }
	});
	input.addEventListener('blur', function() {
		if (this.value == 1) {
			console.log("管理员指令" + 123);
			order.classList.remove('hide');
		} else if(this.value==0){
			order.classList.add('hide');
		} else if(this.value==2){
			order.classList.add('hide');
		} else {
			alert("只能输入0、1、2")
			order.classList.add('hide');
		}
	});

	//1.监听注册按钮是否被点击,若被点击可以执行一个方法
	$("#btn-reg").click(function() {
		//（较为麻烦动态获取表单中控制的数据
		/*let username=$("#username").val(),*/

		console.log($("#form-reg").serialize());
		if (input.value == 1 && input_j.value != 123) {
			alert("管理员注册码错误！");
			location.href = "register.html";
		} else if (input.value == 1 && input_j.value == 123) {
			//2.发送Ajax()的异步请求来完成注册功能
			$.ajax({
				url: "/user/reg",
				type: "POST",
				data: $("#form-reg").serialize(), //序列化为一个value键值对，便于整理数据，也就是将前端输入的数据序列化
				dataType: "json",
				success: function(json) {
					if (json.state == 200) {
						alert("注册成功！请等待管理员审核");
						location.href = "login.html";
					} else {
						alert("注册失败！" + json.message);
					}
				},
				error: function(xhr) {
					// alert("注册时产生未知错误"+xhr.status);
					alert("注册时产生未知错误");

				}
			})
		} else if (input.value == 0 || input.value == 2) {
			$.ajax({
				url: "/user/reg",
				type: "POST",
				data: $("#form-reg").serialize(), //序列化为一个value键值对，便于整理数据，也就是将前端输入的数据序列化
				dataType: "json",
				success: function(json) {
					if (json.state == 200) {
						alert("注册成功！请等待管理员审核");
						location.href = "login.html";
					} else {
						alert("注册失败！" + json.message);
					}
				},
				error: function(xhr) {
					// alert("注册时产生未知错误"+xhr.status);
					alert("注册时产生未知错误");

				}
			})
		}
	})
</script>
</body>

</html>